<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Grima Portal</title>
	<link rel="stylesheet" type="text/css" href="css/themes/bootstrap/easyui.css">
	<link rel="stylesheet" type="text/css" href="css/icon.css">
	<link rel="stylesheet" type="text/css" href="css/portal.css">
	<link rel="stylesheet" type="text/css" href="css/font-awesome.min.css">
	
	<script type="text/javascript" src="js/jquery.min.js"></script>
	<script type="text/javascript" src="js/jquery.easyui.min.js"></script>
</head>
<body class="easyui-layout">
	
    <div id="header" data-options="region:'north',border:false"></div>
    <div id="menu" data-options="region:'west',split:true,title:' '" style="width:250px;"></div>
    <div data-options="region:'east',split:true,collapsed:true,title:' '" style="width:250px;padding:10px;"></div>
    <div id="footer" data-options="region:'south',border:false"></div>
    <div data-options="region:'center',title:'Grupo 0002 : Grima Gestor'">
		<div style="margin:5px">
			<a href="#" title="Gravar" onclick="saveGroup();"><i class="fa fa-save" style="font-size:18px;color:green;padding:5px;"></i>Salvar</a>
			<a href="groups.html" title="Voltar"><i class="fa fa-mail-reply" style="font-size:18px;color:green;padding:5px;"></i>Voltar</a>			
		</div>
		<br/>
    
		<div class="easyui-tabs" >
			<div title="Dados Gerais" style="padding:10px">
			    <form id="ff" method="post">
			    	<table cellpadding="5">
			    		<tr>
			    			<td>ID:</td>
			    			<td><input class="easyui-validatebox textbox" type="text" name="id"></input></td>
			    		</tr>
			    		<tr>
			    			<td>Nome:</td>
			    			<td><input class="easyui-validatebox textbox" type="text" name="name"></input></td>
			    		</tr>
			    		<tr>
			    			<td>Observações:</td>
			    			<td>
			    				<textarea name="message" style="width:400px;height:200px;"> </textarea>
			    			</td>
			    		</tr>

			    	</table>
			    </form>
			</div>
			
			<div title="Usuários" style="padding:10px">
				<div class="easyui-layout" style="width:700px;height:350px;">
					<div data-options="region:'west',split:true" title="Disponíveis" style="width:330px;">
						<table id="dg1" class="easyui-datagrid" style="width:300px;height:450px"
								data-options="rownumbers:true,url:'users.json',method:'get'">
							<thead>
								<tr>
									<th data-options="field:'ck',checkbox:true"></th>
									<th data-options="field:'id',width:80">ID</th>
									<th data-options="field:'name',width:200">Nome</th>
								</tr>
							</thead>
						</table>
					</div>
					<div data-options="region:'center'" style="padding: 100px 5px 5px 5px ">
						<a href="#" title="Adicionar" onclick="addUser();"><i class="fa fa-arrow-right" style="font-size:18px;color:green;padding:5px;"></i></a>
						<a href="#" title="Remover" onclick="RemoverUser();"><i class="fa fa-arrow-left" style="font-size:18px;color:green;padding:5px;"></i></a>			
					</div>
					<div data-options="region:'east',split:true" title="Selecionados" style="width:330px;">
						<table id="dg2" class="easyui-datagrid" style="width:300px;height:450px"
								data-options="rownumbers:true,url:'users.json',method:'get'">
							<thead>
								<tr>
									<th data-options="field:'ck',checkbox:true"></th>
									<th data-options="field:'id',width:80">ID</th>
									<th data-options="field:'name',width:200">Nome</th>
								</tr>
							</thead>
						</table>
					</div>
				</div>
			</div>

		</div>
    </div>

	<style scoped="scoped">
		.textbox{
			height:20px;
			margin:0;
			padding:0 2px;
			box-sizing:content-box;
		}
	</style>
	<script>
		function saveGroup(){
		}
	</script>
	<script>
		$('#header').load('header.html');
		$('#footer').load('footer.html');
		$('#menu').load('menu.html');
	</script>

</body>
</html>